import React from 'react';
import PropTypes from 'prop-types';
import { Text, View, TextInput } from 'react-native';
import { px2dp, noop } from 'bee/utils';
import { Button } from 'bee/components/Buttons';
import { colors } from 'bee/themes';
import styles from './styles';

const HotLabel = ({ text, onPress }) => (
  <Button
    containerStyle={[styles.lableCon, styles.hotLabel]}
    textStyle={[styles.labelText, styles.hotLabelText]}
    text={text}
    onPress={onPress}
  />
);

HotLabel.propTypes = {
  text: PropTypes.string.isRequired,
  onPress: PropTypes.func,
};

HotLabel.defaultProps = {
  onPress: noop,
};

const NormalLabel = ({ text, onPress }) => (
  <Button
    containerStyle={[styles.lableCon, styles.normalLabel]}
    textStyle={[styles.labelText, styles.normalLabelText]}
    text={text}
    onPress={onPress}
  />
);

NormalLabel.propTypes = {
  text: PropTypes.string.isRequired,
  onPress: PropTypes.func,
};

NormalLabel.defaultProps = {
  onPress: noop,
};

const SearchBar = ({ value, confirm, cancel, onChangeText }) => (
  <View style={styles.searchView}>
    <TextInput
      autoFocus
      value={value}
      underlineColorAndroid="transparent"
      onChangeText={keyword => {
        onChangeText(keyword);
      }}
      onBlur={confirm}
      keyboardType="web-search"
      style={styles.searchInput}
    />
    <Button
      text="取消"
      textStyle={{ color: colors.white }}
      containerStyle={{ marginLeft: px2dp(20) }}
      onPress={cancel}
    />
  </View>
);
SearchBar.propTypes = {
  value: PropTypes.string.isRequired,
  onChangeText: PropTypes.func.isRequired,
  confirm: PropTypes.func.isRequired,
  cancel: PropTypes.func.isRequired,
};

const Words = ({ words, onPress }) => (
  <View style={styles.wordsCon}>
    <Text style={styles.wordsTitle}>热门搜索</Text>
    <View style={styles.words}>
      {/* 0:表示热门  1:普通 */}
      {words.map((word, index) => {
        const labelProps = {
          text: word.tagName,
          onPress: () => {
            onPress(word.tagName);
          },
        };

        if (word.styleFlag === 0) {
          return <HotLabel {...labelProps} key={index} />;
        }
        return <NormalLabel {...labelProps} key={index} />;
      })}
    </View>
  </View>
);

Words.propTypes = {
  words: PropTypes.arrayOf(PropTypes.string).isRequired,
  onPress: PropTypes.func,
};
Words.defaultProps = {
  onPress: noop,
};

export { SearchBar, Words };
